<template>
  <div
    style="min-width: 100vw;min-height: 100vh;display: flex;flex-direction: column;"
  >
    <van-nav-bar
      title="户型分析"
      left-text="返回"
      left-arrow
      right-text="选择户型"
      @click-left="$router.go(-1)"
      @click-right="rightClick"
    >
      <template #right>
        <input
          style="width: 76px;"
          type="file"
          accept="image/*"
          @change="rightClick"
        />
      </template>
    </van-nav-bar>

    <div
      style="height: 80px;padding: 10px;display: flex;flex-direction: column;gap: 8px;"
    >
      <div style="display: flex;align-items: center;gap: 10px;">
        <select style="height: 32px;width: 90px;" v-model="context.checked">
          <option value="1">上南下北</option>
          <option value="2">上北下南</option>
        </select>
        <van-button type="primary" size="small" @click="addArea"
          >添加标注</van-button
        >
        <van-button size="small" type="primary" @click="saveFile"
          >存档</van-button
        >
        <van-button
          size="small"
          type="primary"
          @click="
            context.areas = context.areas.filter(item => item.id !== focus)
          "
          >读档</van-button
        >
      </div>
      <div style="display: flex;align-items: center; gap: 10px;">
        <label v-if="currentFocus">
          开门位置
          <select
            style="height: 32px;width: 110px;"
            v-model="currentFocus.base"
          >
            <option
              v-for="(item, i) in context.checked === '1'
                ? [...compassBase]
                : [...compassBase].reverse()"
              v-if="item.name"
              :value="item.code"
              >{{ item.name }}{{ item.code }} - (位置{{ i + 1 }})</option
            >
          </select>
        </label>

        <van-button
          type="warning"
          v-if="currentFocus"
          size="small"
          @click="
            context.areas = context.areas.filter(item => item.id !== focus)
          "
          >移除当前标注</van-button
        >
      </div>
    </div>
    <div @click="focus = ''" style="flex: 1">
      <img
        @contextmenu.prevent="onRightClick"
        :src="context.src"
        :style="{ transform: 'rotate( 90 deg)' }"
        alt=""
        width="100%"
      />

      <template v-for="(item, i) in context.areas">
        <VueDragResize
          :isActive="focus === item.id"
          :w="item.width"
          :h="item.height"
          :x="item.pageX"
          :y="item.pageY"
          v-on:resizing="resize"
          v-on:dragging="resize"
          :stickSize="12"
          @clicked="
            focus = item.id;
            areaClick($event);
          "
        >
          <GridCalc
            @click.catch="log"
            :height="item.height"
            :width="item.width"
            :reverse="context.checked === '2'"
            :style="{
              width: '100%',
              height: '100%',
              opacity: 0.8
            }"
            :base="item.base"
          >
          </GridCalc>
        </VueDragResize>
      </template>
    </div>
  </div>
</template>

<script>
import GridCalc from "./GridCalc.vue";
import VResize from "v-resize";
import VueDragResize from "vue-drag-resize";
import compassBase from "./compassBase.js";
export default {
  components: { GridCalc, VueDragResize },
  directives: {
    resize: VResize
  },
  data() {
    return {
      compassBase,
      editMode: false,
      focus: "",
      context: {
        checked: "1",
        src: "",
        areas: [
          { pageX: 130, pageY: 300, base: 1, width: 200, height: 200, id: "11" }
        ]
      }
    };
  },
  computed: {
    currentFocus() {
      return this.context.areas.find(item => item.id === this.focus);
    }
  },
  mounted() {
    // setInterval(() => {
    //   const el = this.$refs.exchange[0];
    //   if (el) {
    //     const { currentFocus } = this;
    //     console.log("currentFocus", currentFocus);
    //     const { x, y } = el.getBoundingClientRect();
    //     currentFocus.width = x + 15 - currentFocus.pageX;
    //     currentFocus.height = y + 15 - currentFocus.pageY;
    //   }
    // }, 200);
  },

  methods: {
    log: console.log,
    saveFile() {
      const stringData = JSON.stringify(this.context);
      const blob = new Blob([stringData], {
        type: "text/plain;charset=utf-8"
      });
      const objectURL = URL.createObjectURL(blob);

      const aTag = document.createElement("a");
      aTag.href = objectURL;
      aTag.download = "户型存档.json";
      aTag.click();
      URL.revokeObjectURL(objectURL);
    },
    areaClick(e) {
      console.log("e", e);
    },
    addArea() {
      this.context.areas.push({
        pageX: 130,
        pageY: 300,
        base: 1,
        width: 200,
        height: 200,
        id: +new Date()
      });
    },
    resize({ left, top, width, height }) {
      if (this.currentFocus) {
        this.currentFocus.pageX = left;
        this.currentFocus.pageY = top;
        this.currentFocus.width = width;
        this.currentFocus.height = height;
      }
    },
    onRightClick: console.log,
    rightClick(e) {
      console.log("e", e);
      const file = e.target;
      if (!file.files || !file.files[0]) {
        return;
      }
      var reader = new FileReader();
      reader.onload = evt => {
        this.context.src = evt.target.result;
      };
      reader.readAsDataURL(file.files[0]);
    }
  }
};
</script>
